<script setup lang="ts">
import {RouterView} from 'vue-router'
</script>

<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal" :router="true" :ellipsis="false">
        <el-menu-item index="/">
          <img src="@/assets/logo.png" style="height: 48px" alt="Logo" />
        </el-menu-item>
        <el-menu-item index="/home">Home</el-menu-item>
        <el-menu-item index="/about">About</el-menu-item>
        <el-menu-item index="/test">Test</el-menu-item>
        <div class="flex-grow"></div>
        <el-menu-item index="/admin/home">管理后台</el-menu-item>
        <el-sub-menu index="/user">
          <template #title>用户名</template>
          <el-sub-menu index="/user/role">
            <template #title>切换角色</template>
            <el-menu-item index="/role-1">角色1</el-menu-item>
            <el-menu-item index="/role-2">角色2</el-menu-item>
            <el-menu-item index="/role-3">角色3</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/logout">注销</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-main>
      <RouterView />
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
